<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pt-[12px] overflow-auto"
    >
      <el-form-item label="日期类型" prop="timeUnit">
        <el-select
          v-model="form.timeUnit"
          placeholder="请选择"
          clearable
          class="!w-[150px]"
        >
          <el-option value="DAY" label="日" />
          <el-option value="WEEK" label="周" />
          <el-option value="MONTH" label="月" />
          <el-option value="YEAR" label="年" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期范围" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
          class="!w-[260px]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-descriptions direction="vertical" :column="3" border>
      <el-descriptions-item
        label="系统余额"
        label-align="center"
        align="center"
      >
        {{ info.systemBalance }}
      </el-descriptions-item>
      <el-descriptions-item
        label="消费总额"
        label-align="center"
        align="center"
      >
        {{ info.totalConsumePoints }}
      </el-descriptions-item>
      <el-descriptions-item
        label="充值总额"
        label-align="center"
        align="center"
      >
        {{ info.totalRechargePoints }}
      </el-descriptions-item>
      <el-descriptions-item
        label="所有用户"
        label-align="center"
        align="center"
      >
        {{ info.userCount }}
      </el-descriptions-item>
      <el-descriptions-item
        label="活跃用户"
        label-align="center"
        align="center"
      >
        {{ info.activeUserCount }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import { getPointsStats } from "@/api/adminPointApi";

const formRef = ref();
const loading = ref(false);
const form = reactive({
  time: "",
  timeUnit: "",
  startDate: "",
  endDate: ""
});
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
});
type Info = {
  systemBalance: number;
  totalConsumePoints: number;
  totalRechargePoints: number;
  userCount: number;
  activeUserCount: number;
};
const info = ref<Info>({
  systemBalance: 0,
  totalConsumePoints: 0,
  totalRechargePoints: 0,
  userCount: 0,
  activeUserCount: 0
});
watch(
  () => form.time,
  (newVal, oldVal) => {
    if (newVal) {
      form.startDate = newVal[0];
      form.endDate = newVal[1];
    } else {
      form.startDate = "";
      form.endDate = "";
    }
  }
);

async function onSearch() {
  const { time, ...reset } = form;
  const params = {
    page: pagination.currentPage,
    size: pagination.pageSize,
    ...reset
  };
  const { data } = await getPointsStats(params);
  info.value = data;
}
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  form.startDate = "";
  form.endDate = "";
  onSearch();
};
onMounted(() => {
  onSearch();
});
</script>
<style lang="scss" scoped>
.main {
  padding: 20px;
  background-color: #fff;
}
</style>
